<template>
	<div class="logViewer">
		<a-card style="width: 500px">
			<div ref="logContainer" style="width: 100%; height: 150px; text-align: left"></div>
		</a-card>
	</div>
</template>

<script setup>
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import * as monaco from 'monaco-editor'

const props = defineProps(['logs'])

const logContainer = ref()
let logEditor = null
onMounted(() => {
	initLogEditor()
	setLogs()
})

watch(
	() => props.logs,
	(n, o) => {
		setLogs()
	}
)

const setLogs = () => {
	let cn = ''
	if (!props.logs) {
		return
	}
	logEditor.setValue('')
	for (const log of props.logs) {
		cn += log.text + '\n'
	}
	logEditor.setValue(cn)
}
const initLogEditor = () => {
	monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
		validate: false
	})
	logEditor = monaco.editor.create(logContainer.value, {
		theme: 'vs-dark', // 主题
		value: '', // 默认显示的值
		language: 'log',
		folding: true, // 是否折叠
		foldingHighlight: true, // 折叠等高线
		foldingStrategy: 'indentation', // 折叠方式  auto | indentation
		showFoldingControls: 'always', // 是否一直显示折叠 always | mouseover
		disableLayerHinting: true, // 等宽优化
		emptySelectionClipboard: false, // 空选择剪切板
		selectionClipboard: false, // 选择剪切板
		automaticLayout: true, // 自动布局
		codeLens: false, // 代码镜头
		scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
		colorDecorators: true, // 颜色装饰器
		accessibilitySupport: 'off', // 辅助功能支持  "auto" | "off" | "on"
		lineNumbers: 'on', // 行号 取值： "on" | "off" | "relative" | "interval" | function
		lineNumbersMinChars: 5, // 行号最小字符   number
		enableSplitViewResizing: false,
		readOnly: false //是否只读  取值 true | false
	})
}
</script>


<style scoped lang="less">
:deep(.ant-card-body) {
	height: 100% !important;
	padding: 0 !important;
}
</style>
